<template>
  <div class="container">
    <div class="search-box">
      <div class="row">
        <div class="left">
          <el-icon><Search /></el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="right">
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="queryUserParams"
            >查询搜索</el-button
          >
        </div>
      </div>
      <div class="row">
        <span>姓名/账号</span>
        <el-input
          v-model="userParams.keyword"
          placeholder="请输入姓名或账号搜索"
        />
      </div>
    </div>
    <div class="add_box">
      <el-button
        type="primary"
        @click="showDialog = true"
        v-permission="'addUser'"
        >添加</el-button
      >
    </div>
    <el-table
      :data="userList"
      border
      cell-class-name="align-c"
      table-layout="auto"
    >
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="username" label="账号" />
      <el-table-column prop="nickName" label="姓名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="createTime" label="添加时间">
        <template #default="{ row }">
          <div>
            {{ dateFormat(row.createTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="loginTime" label="最后登录">
        <template #default="{ row }">
          <div>
            {{ dateFormat(row.loginTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="switchStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" style="width: 180px">
        <template #default="{ row }">
          <el-button
            text
            type="primary"
            @click="allocRoleHandle(row.id)"
            v-permission="'allocRole'"
            >分配角色</el-button
          >
          <el-button
            text
            type="primary"
            @click="editidFn(row.id)"
            v-permission="'editRole'"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="userParams.pageNum"
        v-model:page-size="userParams.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="queryUserParams"
        @current-change="queryUserParams"
      />
    </ElConfigProvider>
  </div>
  <EditUser :show="showDialog" @hide="closeDialog" :id="edutid" />
  <AllocRole :show="showAllocRole" :id="allocId" @hide="closeAllocRole" />
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { userListApi, switchUserStatusApi } from "./api";
import { Search } from "@element-plus/icons-vue";
import { ElConfigProvider, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { dateFormat } from "@/utils";
import EditUser from "./editUser.vue";
import AllocRole from "./allocRole.vue";

const edutid = ref(0);

const editidFn = (id: number) => {
  showDialog.value = true;
  edutid.value = id;
};

const userParams = reactive<IUserListParams>({
  keyword: "",
  pageNum: 1,
  pageSize: 10,
});

const switchStatus = (row: IUserModel) => {
  switchUserStatusApi(row.id!, row.status)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功");
      }
    })
    .catch((err) => {
      row.status = row.status === 1 ? 0 : 1;
    });
};

const userList = ref<IUserModel[]>([]);
const total = ref(0);
const queryUserParams = () => {
  userListApi(userParams).then((res) => {
    // console.log(res);
    userList.value = res.data.list;
    total.value = res.data.total;
  });
};
// 重置
const reset = () => {
  userParams.keyword = "";
  queryUserParams();
};
// 请求初始数据
queryUserParams();
const showDialog = ref(false);
// 隐藏弹出框
const closeDialog = (isReload?: boolean) => {
  showDialog.value = false;
  edutid.value = 0;
  if (isReload) queryUserParams();
};

const allocId = ref(0);
const showAllocRole = ref(false);
// 分配角色
const allocRoleHandle = (id: number) => {
  allocId.value = id;
  showAllocRole.value = true;
};
const closeAllocRole = () => {
  allocId.value = 0;
  showAllocRole.value = false;
};
</script>
<style lang="less" scoped>
.container {
  .search-box {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.24);
    padding: 20px;
    margin-bottom: 20px;
    .row {
      display: flex;
      align-items: center;
      &:first-child {
        justify-content: space-between;
        margin-bottom: 10px;
      }
      &:last-child {
        width: 400px;
        span {
          width: 100px;
        }
      }
    }
  }
  .el-pagination {
    margin-top: 20px;
  }
  :deep(.el-table) {
    .cell {
      text-align: center !important;
    }
  }
}
</style>
